<script lang="js" setup name="SeriesBar">
import { ref, reactive, computed, getCurrentInstance } from "vue";
import SeriesItem from "./SeriesItem.vue";
import { useArchiveStore } from "../stores/archive";
import { useAppStore } from "../stores/appStore";
import { IsPhone } from "../utils";
import XMenu from "./XMenu/XMenu.vue";

const instance = getCurrentInstance();
const archiveStore = useArchiveStore();
const appStore = useAppStore();
const seriesItemRefs = reactive([]);
const domWidth = ref(146);
const xMenu = ref(null);
const seriesContainer = ref(null);
const menuItems = reactive([
    { label: "折叠显示"},
    { label: "平铺显示"},
    { label: "按日期排序"},
    { label: "按序号排序"},
]);

const menuList = reactive([
    { text: "折叠显示", id: "fold" },
    { text: "平铺显示", id: "tile" },
    { text: "按日期排序", id: "sortbydate" },
    { text: "按序号排序", id: "sortbynumber" },
]);


const navClass = computed(() => {
    console.log("navClass computed - IsPhone:", IsPhone(), "navbarPos:", appStore.navbarPos);
    return IsPhone() ? "navigationbar-phone"
            : appStore.navbarPos === "left"
            ? "navigationbar"
            : "navigationbar-phone";
});

const navStyle = computed(() => {
    console.log("navStyle computed - navbarPos:", appStore.navbarPos, "navClass:", navClass.value);
    // 当navbarPos为bottom或者使用navigationbar-phone类时，设置固定宽度
    if (appStore.navbarPos === "bottom" || navClass.value === "navigationbar-phone") {
        // 计算当前屏幕宽度
        const screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        return {
            width: `${screenWidth}px`,
            maxWidth: `${screenWidth}px`  // 使用maxWidth限制最大宽度，防止撑开父容器
        }
    } else {
        return {};
    }
});

const onScroll = (e) => {
    const el = instance.proxy.$el;
    console.log("onScroll - navClass:", navClass.value, "scrollWidth:", el.scrollWidth, "clientWidth:", el.clientWidth);
    if (navClass.value === "navigationbar-phone" && el.scrollWidth > el.clientWidth) {
        // 使用deltaY进行水平滚动，乘以系数调整滚动速度
        const scrollAmount = e.deltaY * 2;
        el.scrollBy(scrollAmount, 0);
        e.preventDefault(); // 阻止默认行为
    }
};


const getItemRef = (el, idx) => {
    if (el) {
        seriesItemRefs[idx] = el;
    }
};

const onSelected = ({pos}) => {
    for (let i = 0; i < seriesItemRefs.length; i++) {
        if (i === pos) {
            seriesItemRefs[i].setSelected(true);
        } else {
            seriesItemRefs[i].setSelected(false);
        }
    }
};

const onDblClick = ({pos}) => {
};

const setWidth = (width) => {
    domWidth.value = width;

};

const showMenu = (e) => {
    // console.log("SeriesBar.showMenu, e:", e);
    xMenu.value.show(menuList, { left: e.clientX, top: e.clientY });
};
const hideMenu = () => {
    xMenu.value.hide();
};

// 组件挂载后设置滚动监听
import { onMounted, onUnmounted, watch } from 'vue';
onMounted(() => {
});

// 组件卸载时移除监听器
onUnmounted(() => {
});

// 监听系列列表变化
watch(() => archiveStore.seriesList, () => {
}, { deep: true });

// 调试函数
const debugScrollInfo = () => {
    if (seriesContainer.value) {
        const container = seriesContainer.value;
        console.log('Scroll Info:', {
            scrollWidth: container.scrollWidth,
            clientWidth: container.clientWidth,
            scrollLeft: container.scrollLeft,
            seriesCount: archiveStore.seriesList.length
        });
    }
};

// 暴露调试函数
defineExpose({
    setWidth,
    debugScrollInfo
});
</script>

<template>
	<div class="navbar" @contextmenu.prevent="showMenu">
		<XMenu ref="xMenu" :menu="menuItems" @mouseleave="hideMenu" />
		<div class="series-container" :style="navStyle">
			<!-- 序列项容器 -->
			<div :class="navClass" @mousewheel.stop="onScroll" ref="seriesContainer">
				<SeriesItem
					v-for="(series, idx) in archiveStore.seriesList"
					:key="series.seriesInsUid"
					:ref="el => getItemRef(el, idx)"
					:series="series"
					:pos="idx"
					@selected="onSelected"
					@dblclick="onDblClick"
				/>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.navbar {
	height: 100%;
}
.navigationbar {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2px 1px;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.navigationbar-phone {
	display: flex;
	flex-direction: row;
	height: 100%;
	white-space: nowrap;
	overflow-x: auto !important;
	overflow-y: hidden;
	padding: 1px 2px;
	font-size: 1.2rem;
	gap: 4px;
	/* 宽度由JavaScript动态计算，确保可以显示滚动条 */
	box-sizing: border-box;
	flex-shrink: 0;
	/* 加粗滚动条 */
	scrollbar-width: auto;
	-webkit-overflow-scrolling: touch;
	/* 确保滚动条可见 */
	-ms-overflow-style: auto;
	width: 99%;
}

/* 自定义滚动条样式 */
.navigationbar-phone::-webkit-scrollbar {
	display: block; /* Chrome, Safari and Opera */
	height: 20px; /* 加宽滚动条高度，便于触摸操作 */
}

.navigationbar-phone::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 8px;
}

.navigationbar-phone::-webkit-scrollbar-thumb {
	background: #666;
	border-radius: 8px;
	border: 2px solid #f1f1f1;
	min-height: 24px;
}

.navigationbar-phone::-webkit-scrollbar-thumb:hover {
	background: #444;
}

/* 系列容器样式 */
.series-container {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	width: 100%;
	position: relative;
}

/* 确保滚动条始终可见 */
</style>
